<#include "/layout/layout.ftl"/>
<@body>
<script src="/script/tool/map.js"></script>
<script src="/script/tool/http.js"></script>
<script src="/script/tool/keyValueUtil.js"></script>
<form method="post" action="/component/saveComponent" class="form-horizontal">
    <div class="form-group">
        <div class="col-md-12">
            <label class="col-md-2 control-label">接口别名:</label>
            <div class="col-md-5">
                <input name="interfaceAliasName" class="form-control" value="${interfaceAliasName!}">
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-12">
            <label class="col-md-2 control-label">接口名(url):</label>
            <div class="col-md-5">
                <input name="interfaceName" class="form-control" value="${interfaceName!}">
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-12">
            <label class="col-md-2 control-label">host:</label>
            <div class="col-md-5">
                <input name="host" class="form-control" value="${host!}">
            </div>
        </div>
    </div>

    <div class="row form-group">
        <div class="col-md-12">
            <label class="col-md-2 control-label">方法名:</label>
            <div class="col-md-1">
                <select id="encoding" name="interfaceMethod" class="form-control">
                    <option value="GET" <#if interfaceMethod?? && interfaceMethod="GET"> selected</#if>>GET</option>
                    <option value="POST" <#if interfaceMethod?? && interfaceMethod="POST"> selected</#if>>POST</option>
                </select>
            </div>
            <label class="col-md-1 control-label">编码:</label>
            <div class="col-md-1">
                <select id="encoding" name="encoding" class="form-control">
                    <option value="UTF-8" <#if encoding?? && encoding="UTF-8"> selected</#if> >UTF-8</option>
                    <option value="GBK"   <#if encoding?? && encoding="GBK"> selected</#if>>GBK</option>
                </select>
            </div>
            <label class="col-md-1 control-label">超时(秒):</label>
            <div class="col-md-1">
                <select id="timeout" name="timeout" class="form-control">
                    <option value="1000" <#if timeout?? && timeout=1000> selected</#if> >1</option>
                    <option value="2000" <#if timeout?? && timeout=2000> selected</#if>>2</option>
                    <option value="3000" <#if timeout?? && timeout=3000> selected</#if>>3</option>
                    <option value="4000" <#if timeout?? && timeout=4000> selected</#if>>4</option>
                    <option value="5000" <#if timeout?? && timeout=5000> selected</#if>>5</option>
                    <option value="6000" <#if timeout?? && timeout=6000> selected</#if>>6</option>
                    <option value="7000" <#if timeout?? && timeout=7000> selected</#if>>7</option>
                    <option value="8000" <#if timeout?? && timeout=8000> selected</#if>>8</option>
                    <option value="9000" <#if timeout?? && timeout=9000> selected</#if>>9</option>
                    <option value="10000" <#if timeout?? && timeout=10000> selected</#if>>10</option>
                </select>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-12">
            <label class="col-md-2 control-label" for="urlHeader">Headers:</label>
            <div class="col-md-5">
                <div style="float: right">
                    <input type="hidden" name="id" value="${id!}">
                    <input type="hidden" name="interfaceType" value="${interfaceType!}">
                    <input type="button" id="addHeader" onclick="" value="增加header" class="btn btn-primary">
                    <input type="submit" value="保存" class="btn btn-primary">
                </div>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-12">
            <div class="col-md-2">
            </div>
            <div>
                <input type="hidden" id="headers" name="headers">
                <div id="urlHeader" class="col-md-5"></div>
            </div>
        </div>
    </div>
</form>
<script>
    var headerParam;
    $(function () {
        headerParam = new KeyValueUtil();
        //第一个参数在哪里增加子元素，第二个参数点击哪个按钮，第三个参数结果写到哪个隐藏标签
        headerParam.init($('#urlHeader'), $("#addHeader"), $("#headers"));
        $("form").submit(function () {
            headerParam.writeParam();
        })
        <#if headers??>
            var headers = '${headers}';
            headerParam.writePage(headers);
        </#if>
    });

</script>
</@body>